<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}MinerU 文档解析系统{% endblock %}</title>
    <script src="/static/vendor/js/tailwindcss-3.4.17.js"></script>
    <link rel="stylesheet" href="/static/vendor/css/font-awesome-6.4.0.all.min.css">
    <style>
        .sidebar {
            transition: transform 0.3s ease;
        }
        .sidebar.collapsed {
            transform: translateX(-100%);
        }
        .main-content {
            transition: margin-left 0.3s ease;
        }
        .main-content.expanded {
            margin-left: 0;
        }
        .progress-bar {
            transition: width 0.3s ease;
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .hover-scale {
            transition: transform 0.2s ease;
        }
        .hover-scale:hover {
            transform: scale(1.02);
        }
        .task-card {
            transition: all 0.3s ease;
        }
        .task-card:hover {
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .nav-item {
            transition: all 0.2s ease;
        }
        .nav-item:hover {
            background-color: rgba(59, 130, 246, 0.1);
            border-left: 4px solid #3b82f6;
        }
        .nav-item.active {
            background-color: rgba(59, 130, 246, 0.15);
            border-left: 4px solid #3b82f6;
        }
        .modal {
            backdrop-filter: blur(5px);
        }
        .form-input {
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .form-input:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        .btn-primary {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            transition: all 0.2s ease;
        }
        .btn-primary:hover {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            transform: translateY(-1px);
        }
        .status-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
        }
        .status-pending {
            background-color: #fef3c7;
            color: #92400e;
        }
        .status-processing {
            background-color: #dbeafe;
            color: #1e40af;
        }
        .status-completed {
            background-color: #d1fae5;
            color: #065f46;
        }
        .status-failed {
            background-color: #fee2e2;
            color: #991b1b;
        }
        .upload-area {
            border: 2px dashed #d1d5db;
            border-radius: 0.5rem;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
        }
        .upload-area:hover {
            border-color: #3b82f6;
            background-color: #f8fafc;
        }
        .upload-area.dragover {
            border-color: #3b82f6;
            background-color: #eff6ff;
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body class="bg-gray-50">
    {% if user %}
    <!-- 主容器 -->
    <div class="flex h-screen">
        <!-- 侧边栏 -->
        <div id="sidebar" class="sidebar w-64 bg-white shadow-lg flex-shrink-0">
            <div class="p-6">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
                        <i class="fas fa-file-alt text-white text-lg"></i>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-gray-800">MinerU 系统</h1>
                        <p class="text-sm text-gray-500">文档解析服务</p>
                    </div>
                </div>
            </div>
            
            <nav class="mt-6">
                <div class="px-4 space-y-1">
                    <a href="/web/dashboard?token={{ token }}" class="nav-item {% if request.url.path == '/web/dashboard' %}active{% endif %} flex items-center space-x-3 px-4 py-3 text-gray-700 rounded-lg">
                        <i class="fas fa-tachometer-alt w-5"></i>
                        <span>仪表板</span>
                    </a>
                    <a href="/web/upload?token={{ token }}" class="nav-item {% if request.url.path == '/web/upload' %}active{% endif %} flex items-center space-x-3 px-4 py-3 text-gray-700 rounded-lg">
                        <i class="fas fa-upload w-5"></i>
                        <span>文档上传</span>
                    </a>
                    <a href="/web/tasks?token={{ token }}" class="nav-item {% if request.url.path == '/web/tasks' %}active{% endif %} flex items-center space-x-3 px-4 py-3 text-gray-700 rounded-lg">
                        <i class="fas fa-tasks w-5"></i>
                        <span>任务管理</span>
                    </a>
                    <a href="/web/slicing?token={{ token }}" class="nav-item {% if request.url.path == '/web/slicing' %}active{% endif %} flex items-center space-x-3 px-4 py-3 text-gray-700 rounded-lg">
                        <i class="fas fa-cut w-5"></i>
                        <span>文档切片</span>
                    </a>
                    {% if user.role == 'admin' %}
                    <a href="/web/users?token={{ token }}" class="nav-item {% if request.url.path == '/web/users' %}active{% endif %} flex items-center space-x-3 px-4 py-3 text-gray-700 rounded-lg">
                        <i class="fas fa-users w-5"></i>
                        <span>用户管理</span>
                    </a>
                    <a href="/web/logs?token={{ token }}" class="nav-item {% if request.url.path == '/web/logs' %}active{% endif %} flex items-center space-x-3 px-4 py-3 text-gray-700 rounded-lg">
                        <i class="fas fa-history w-5"></i>
                        <span>调用日志</span>
                    </a>
                    <a href="/web/settings?token={{ token }}" class="nav-item {% if request.url.path == '/web/settings' %}active{% endif %} flex items-center space-x-3 px-4 py-3 text-gray-700 rounded-lg">
                        <i class="fas fa-cog w-5"></i>
                        <span>系统设置</span>
                    </a>
                    {% endif %}
                </div>
            </nav>
            
            <div class="absolute bottom-0 w-64 p-4 border-t">
                <div class="flex items-center space-x-3">
                    <img src="/static/images/avatars/avatar_{{ '%03d' % ((user.id % 100) + 1) }}.jpg" alt="用户头像" class="w-10 h-10 rounded-full">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-gray-800">{{ user.username }}</p>
                        <p class="text-xs text-gray-500">{{ user.email }}</p>
                    </div>
                    <a href="/web/login" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-sign-out-alt"></i>
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 主内容区 -->
        <div id="mainContent" class="main-content flex-1 flex flex-col overflow-hidden">
            <!-- 顶部栏 -->
            <header class="bg-white shadow-sm border-b border-gray-200">
                <div class="flex items-center justify-between px-6 py-4">
                    <div class="flex items-center space-x-4">
                        <button id="sidebarToggle" class="text-gray-500 hover:text-gray-700 lg:hidden">
                            <i class="fas fa-bars text-xl"></i>
                        </button>
                        <h2 id="pageTitle" class="text-2xl font-bold text-gray-800">{% block page_title %}仪表板{% endblock %}</h2>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="relative p-2 text-gray-500 hover:text-gray-700">
                            <i class="fas fa-bell text-xl"></i>
                            <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
                        </button>
                        <button class="p-2 text-gray-500 hover:text-gray-700">
                            <i class="fas fa-th-large text-xl"></i>
                        </button>
                    </div>
                </div>
            </header>
            
            <!-- 内容区域 -->
            <main class="flex-1 overflow-y-auto p-6">
                {% block content %}{% endblock %}
            </main>
        </div>
    </div>
    {% else %}
    <!-- 简单容器（用于登录页面） -->
    <div class="min-h-screen bg-gray-50">
        {% block login_content %}{% endblock %}
    </div>
    {% endif %}

    <!-- 通用JavaScript -->
    <script>
        // 侧边栏切换
        document.getElementById('sidebarToggle')?.addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('mainContent');
            sidebar.classList.toggle('collapsed');
            mainContent.classList.toggle('expanded');
        });
        
        // AJAX请求封装
        async function apiRequest(url, options = {}) {
            const defaultOptions = {
                headers: {
                    'Content-Type': 'application/json',
                }
            };
            
            // 如果有token，添加到请求头（优先从localStorage获取，其次从URL参数获取）
            let token = localStorage.getItem('auth_token');
            if (!token) {
                token = new URLSearchParams(window.location.search).get('token');
            }
            if (token) {
                defaultOptions.headers['Authorization'] = `Bearer ${token}`;
            }
            
            const finalOptions = {
                ...defaultOptions,
                ...options,
                headers: {
                    ...defaultOptions.headers,
                    ...options.headers
                }
            };
            
            try {
                const response = await fetch(url, finalOptions);
                const data = await response.json();
                
                if (!response.ok) {
                    throw new Error(data.detail || data.message || '请求失败');
                }
                
                return data;
            } catch (error) {
                console.error('API请求失败:', error);
                // 确保错误信息能够正确显示
                let errorMessage = '请求失败';
                if (error.message) {
                    errorMessage = error.message;
                } else if (typeof error === 'object') {
                    errorMessage = JSON.stringify(error);
                } else {
                    errorMessage = String(error);
                }
                throw new Error(errorMessage);
            }
        }
        
        // 显示通知
        // function showNotification(message, type = 'success') {
        //     // 移除已存在的通知
        //     const existingNotifications = document.querySelectorAll('.notification');
        //     existingNotifications.forEach(n => n.remove());
            
        //     const notification = document.createElement('div');
        //     notification.className = `notification ${type}`;
        //     notification.textContent = message;
            
        //     // 确保添加到body的末尾，避免影响页面结构
        //     document.body.appendChild(notification);
            
        //     // 3秒后移除
        //     setTimeout(() => {
        //         if (notification.parentNode) {
        //             notification.remove();
        //         }
        //     }, 3000);
        // }
        
        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleString('zh-CN');
        }
    </script>
    
    <!-- 引入应用JavaScript -->
    <script src="/static/js/app.js"></script>
    
    {% block extra_js %}{% endblock %}
</body>
</html>